<template>
  <div>
    <div class="ant-layout-header ant-header-fixedHeader ant-header-side-opened" style="padding: 0px;">
      <div class="header">
        
        <div class="user-wrapper">
          <div class="content-box" >
            <div style="float: left;width: 70%;">
              <h1 style="color: white;">毕业分配选岗系统 - 第一轮分配</h1>
            </div>
            <div style="float: left;width: 29%;text-align: right;">
              <a-icon type="home" style="color: white;" @click="goHome"/>
            </div>
          </div>
        </div>
      </div>
    </div>
    <a-row :gutter="24" style="margin-bottom: 20px;">
      <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
        <a-card :bordered="false">
          <div class="table-page-search-wrapper">
            <a-form layout="inline">
              <a-row :gutter="48">
                <a-col :md="6" :sm="24">
                  <a-form-item label="专业名称">
                    <!-- <a-input v-model="queryParam.majorname" placeholder="请输入专业名称" /> -->
                    <a-select v-model="queryParam.majorcode" placeholder="请选择" default-value="0">
                      <a-select-option  v-for="(obj, index) in selectData['001']" :key="index" :value="obj.code">{{obj.name}}</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :md="4" :sm="24">
                  <a-form-item label="性别">
                    <a-select default-value="男" v-model="queryParam.gender" style="width: 120px">
                      <a-select-option value="男"> 男 </a-select-option>
                      <a-select-option value="女"> 女 </a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :md="4" :sm="24">
                  <a-form-item label="对象">
                    <a-select default-value="青年学生" v-model="queryParam.object" style="width: 120px">
                      <a-select-option value="青年学生"> 青年学生 </a-select-option>
                      <a-select-option value="士兵学员"> 士兵学员 </a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :md="8" :sm="24">
                  <span class="table-page-search-submitButtons">
                    <a-button type="primary" @click="getData()">查询</a-button>
                  </span>
                </a-col>
              </a-row>
            </a-form>
          </div>
        </a-card>
      </a-col>
    </a-row>

<div  class="mywp">
    <a-card :bordered="false" :body-style="{padding: '0'}">
      <div class="salesCard">
        <a-row :gutter="24">
          <a-col :xl="15" :lg="24" :md="24" :sm="24" :xs="24">
            <a-card title="学员列表" :bordered="false">
              <a-spin :spinning="myLoading">
                <div>
                  <a-table
                    class="components-table-demo-nested"
                    ref="table"
                    :columns="volunteerNum>1?volunteerNum>2?columns3:columns2:columns1"
                    :row-key="record => record.userId"
                    :data-source="data"
                    :pagination="pagination"
                    @change="handleTableChange">
                    <span slot="action" slot-scope="text, record">
                      <a @click="work(record)" v-if="record.workFlg=='0'">分配</a>
                      <a-divider type="vertical" v-if="record.workFlg=='0'" />
                      <a-popconfirm
                        title="是否放弃分配?"
                        @confirm="workBack(record)"
                        @cancel="cancel"
                        okText="是"
                        cancelText="否"
                        v-if="record.workFlg=='0'"
                      >
                        <a href="#">放弃</a>
                      </a-popconfirm>
                      <!-- <a @click="workBack(record)" v-if="record.workFlg=='0'&&record.delFlg=='0'">放弃</a> -->
                      <a-popconfirm
                        title="是否保存分配?"
                        @confirm="save(record)"
                        @cancel="cancel"
                        okText="是"
                        cancelText="否"
                        v-if="record.saveFlg=='1'"
                      >
                        <a href="#">保存</a>
                      </a-popconfirm>
                      <!-- <a @click="save(record)" v-if="record.saveFlg=='1'">保存</a> -->
                      <a-divider type="vertical" v-if="record.saveFlg=='1'" />
                      <a @click="saveCancel(record)" v-if="record.saveFlg=='1'">取消</a>
                    </span>
                  </a-table>
                </div>
              </a-spin>
            </a-card>
          </a-col>
          <a-col
            :xl="9"
            :lg="24"
            :md="24"
            :sm="24"
            :xs="24">
            <a-card title="单位列表" :bordered="false" >
              <a-spin :spinning="myLoadingDept">
                <div>
                  <a-table
                    class="components-table-demo-nested"
                    ref="table"
                    :columns="columnsDept"
                    :row-key="record => record.userId"
                    :data-source="dataDept"
                    :pagination="false"
                    @change="handleTableChangeDept">
                    <span slot="action" slot-scope="text, record">
                      <a @click="select(record)" v-if="record.trueNum>'0'">选择</a>
                    </span>
                    
                  </a-table>
                </div>
              </a-spin>
            </a-card>
          </a-col>
        </a-row>
      </div>
    </a-card>
</div>












    <!-- <a-row :gutter="24">
        <a-col :xl="16" :lg="24" :md="24" :sm="24" :xs="24">
          <a-card title="学员列表"  :bordered="false">
            <a-spin :spinning="myLoading">
              <div>
                <a-table class="components-table-demo-nested"
                  ref="table" 
                  :columns="volunteerNum>1?volunteerNum>2?columns3:columns2:columns1" 
                  :row-key="record => record.userId" 
                  :data-source="data" 
                  :pagination="pagination"
                  @change="handleTableChange">
                  <span slot="action" slot-scope="text, record">
                      <a @click="work(record)" v-if="record.workFlg=='0'&&record.delFlg=='0'">分配</a>
                      <a @click="save(record)" v-if="record.saveFlg=='1'&&record.delFlg=='0'">保存</a>
                      <a-divider type="vertical" v-if="record.saveFlg=='1'&&record.delFlg=='0'" />
                      <a @click="saveCancel(record)" v-if="record.saveFlg=='1'&&record.delFlg=='0'">取消</a>
                  </span>
                </a-table>
              </div>
            </a-spin>
          </a-card>
        </a-col>
        <a-col style="padding: 0 12px" :xl="8" :lg="24" :md="24" :sm="24" :xs="24">
          <a-card title="单位列表" :bordered="false">
            <a-spin :spinning="myLoadingDept">
              <div>
                <a-table class="components-table-demo-nested"
                    ref="table" 
                    :columns="columnsDept" 
                    :row-key="record => record.userId" 
                    :data-source="dataDept" 
                    :pagination="paginationDept"
                    @change="handleTableChangeDept">
                    <span slot="action" slot-scope="text, record">
                        <a @click="select(record)" v-if="record.trueNum>'0'">选择</a>
                    </span>
                  </a-table>
              </div>
            </a-spin>
          </a-card>
        </a-col>
      </a-row> -->
  </div>
</template>

<script>
  import {
    timeFix
  } from '@/utils/util'
  import {
    mapState
  } from 'vuex'

  import {
    PageView
  } from '@/layouts'
  import HeadInfo from '@/components/tools/HeadInfo'
  import {
    Radar
  } from '@/components'
  import {
    getUrl,
    postAxiosUrl,
    uploadUrl
  } from '@/api/manage'
  import Ellipsis from '@/components/Ellipsis'
  export default {
    name: 'Workplace',
    components: {
      PageView,
      HeadInfo,
      Radar,
      Ellipsis
    },
    data() {
      return {
        timeFix: timeFix(),
        avatar: '',
        user: {},
        activities: [],
        queryParam: {
          gender: '男',
          object: '青年学生'
        },
        columns3: [
          { dataIndex: 'stuname', title: '姓名' },
          { dataIndex: 'majorname', title: '专业' },
          { dataIndex: 'stuScore', title: '得分', width: 60 },
          { dataIndex: 'stuRain', title: '排名', width: 60 },
          { dataIndex: 'volunteerOne', title: '志愿1', width: 120 },
          { dataIndex: 'volunteerTwo', title: '志愿2', width: 120 },
          { dataIndex: 'volunteerThree', title: '志愿3', width: 120 },
          { title: '操作', width: 110, fixed: 'right',
            scopedSlots: { customRender: 'action'  }
          }
        ],
        columns2: [
          { dataIndex: 'stuname', title: '姓名' },
          { dataIndex: 'majorname', title: '专业' },
          { dataIndex: 'stuScore',  title: '得分', width: 60 },
          { dataIndex: 'stuRain', title: '排名', width: 60 },
          { dataIndex: 'volunteerOne', title: '志愿1', width: 150 },
          { dataIndex: 'volunteerTwo', title: '志愿2', width: 150 },
          { title: '操作', width: 110, fixed: 'right',
            scopedSlots: { customRender: 'action' }
          }
        ],
        columns1: [
          { dataIndex: 'stuname', title: '姓名' },
          { dataIndex: 'majorname', title: '专业' },
          { dataIndex: 'stuScore', title: '得分', width: 60 },
          { dataIndex: 'stuRain', title: '排名', width: 60 },
          { dataIndex: 'volunteerOne', title: '志愿1', width: 200 },
          { title: '操作', width: 110, fixed: 'right',
            scopedSlots: { customRender: 'action' }
          }
        ],
        data: [],
        pagination: {},
        myLoading: false,
        queryParamDept: {},
        columnsDept: [
          { title: '操作', width: 60, 
            scopedSlots: { customRender: 'action' }
          },
          { dataIndex: 'deptname', title: '名称', width: 200 },
          { dataIndex: 'trueNum', title: '可选', width: 60 },
          { dataIndex: 'hardFlg', title: '艰苦地区', width: 90 }
        ],
        dataDept: [],
        paginationDept: {},
        myLoadingDept: false,
        selectUser: {},
        volunteerNum: 3,
        selectData:{},
      }
    },
    computed: {
      ...mapState({
        nickname: (state) => state.user.nickname,
        welcome: (state) => state.user.welcome
      }),
      userInfo() {
        return this.$store.getters.userInfo
      }
    },
    created() {
      this.user = this.userInfo
      this.avatar = this.userInfo.avatar
      this.getVolunteerData()
      this.getSelectData()
    },
    methods: {
      goHome(){
        this.$router.push('/')
      },
      getSelectData(params = {}) {
        var _this = this
        getUrl('cutDictionary/getAllSelect', params)
          .then(res => {
            console.log(res)
            _this.selectData = res.result
          })
      },
      getVolunteerData() {
        var _this = this
        getUrl('graduationDic/getInfo', {})
          .then(res => {
            console.log(res)
            _this.volunteerNum = res.result && res.result.volunteerNum > 0 ? res.result.volunteerNum : 3
          })
      },
      getData(params = {}) {
        var _this = this
        if (!_this.queryParam.majorcode) {
          _this.$message.error('请选择专业')
          return
        }
        if (!_this.queryParam.gender) {
          _this.$message.error('请选择性别')
          return
        }
        if (!_this.queryParam.object) {
          _this.$message.error('请选择对象')
          return
        }
        _this.myLoading = true
        _this.selectData['001'].forEach(element => {
          if(element.code==_this.queryParam.majorcode){
            params['majorname']=element.name
          }
        });
        params['majorcode'] = _this.queryParam.majorcode
        params['gender'] = _this.queryParam.gender
        params['object'] = _this.queryParam.object
        params['hardFlg'] = '是'
        getUrl('graduationUser/getAllUserWork', params)
          .then(res => {
            _this.myLoading = false
            var data = res.result.data
            data.forEach((item, index) => {
              item['workFlg'] = '0'
              item['saveFlg'] = '0'
            })
            _this.data = data

            const pagination = {
              ...this.pagination
            }
            // Read total count from server
            pagination.total = res.result.totalCount
            pagination.showTotal = total => `共 ${total} 条`
            pagination.showQuickJumper = true
            this.pagination = pagination

          })
        this.dataDept = []

      },
      handleTableChange(pagination, filters, sorter) {
        console.log(pagination)
        const pager = {
          ...this.pagination
        }
        pager.current = pagination.current
        this.pagination = pager
        this.getData({
          results: pagination.pageSize,
          page: pagination.current,
          sortField: sorter.field,
          sortOrder: sorter.order,
          ...filters,
        })
      },
      getDataDept(params = {}) {
        var _this = this
        _this.myLoadingDept = true
        params['majorname'] = _this.queryParamDept.majorname
        params['gender'] = _this.queryParamDept.gender
        params['object'] = _this.queryParamDept.object
        params['hardFlg'] = '是'
        getUrl('graduationCompany/getAllDeptWork', params)
          .then(res => {
            _this.myLoadingDept = false
            var data = res.result.data
            _this.dataDept = data

            const pagination = {
              ...this.paginationDept
            }
            // Read total count from server
            pagination.total = res.result.totalCount
            pagination.showTotal = total => `共 ${total} 条`
            pagination.showQuickJumper = true
            this.paginationDept = pagination

          })

      },
      handleTableChangeDept(pagination, filters, sorter) {
        // console.log(pagination)
        // const pager = { ...this.paginationDept
        // }
        // pager.current = pagination.current
        // this.paginationDept = pager
        // this.getDataDept({
        //   results: pagination.pageSize,
        //   page: pagination.current,
        //   sortField: sorter.field,
        //   sortOrder: sorter.order,
        //   ...filters,
        // })
      },
      work(e) {
        this.selectUser = e
        const newData = [...this.data]
        const target = newData.filter(item => e === item)[0]
        if (target) {
          newData.forEach((item, index) => {
            item['workFlg'] = '1'
          })
          target.saveFlg = '1'
          this.data = newData
        }
        this.queryParamDept['majorname'] = e.majorname
        this.queryParamDept['gender'] = e.gender
        this.queryParamDept['object'] = e.object
        this.queryParamDept['hardFlg'] = '是'
        this.getDataDept()
      },
      workBack(e) {
        var _this = this
        var params = e
        _this.myLoading = true
        postAxiosUrl('graduationUser/saveWorkBack', params)
          .then(res => {
            if (res.success) {
              _this.myLoading = false
              _this.getData()
              _this.dataDept = []
              const pagination = {
                ...this.paginationDept
              }
              pagination.total = 0
              pagination.showTotal = total => `共 ${total} 条`
              pagination.showQuickJumper = true
              this.paginationDept = pagination
              _this.selectUser = {}
            }
          })
      },
      save(e) {
        var _this = this
        var params = e
        var check = _this.checkParams(params)
        if (check.flg) {
          _this.$message.warning(check.msg)
          return
        }
        _this.myLoading = true
        postAxiosUrl('graduationUser/saveWorkOne', params)
          .then(res => {
            if (res.success) {
              _this.myLoading = false
              _this.getData()
              _this.dataDept = []
              const pagination = {
                ...this.paginationDept
              }
              pagination.total = 0
              pagination.showTotal = total => `共 ${total} 条`
              pagination.showQuickJumper = true
              this.paginationDept = pagination
              _this.selectUser = {}
            }
          })
      },
      checkParams(params) {
        if (!params.volunteerOne&&this.volunteerNum>=1) {
          var check = {
            flg: true,
            msg: '请选择志愿1'
          }
          return check
        }
        if (!params.volunteerTwo&&this.volunteerNum>=2) {
          var check = {
            flg: true,
            msg: '请选择志愿2'
          }
          return check
        }
        if (!params.volunteerThree&&this.volunteerNum>=3) {
          var check = {
            flg: true,
            msg: '请选择志愿3'
          }
          return check
        }
        var check = {
          flg: false,
          msg: ''
        }
        return check
      },
      saveCancel(e) {
        this.selectUser = {}
        const newData = [...this.data]
        const target = newData.filter(item => e === item)[0]
        if (target) {
          newData.forEach((item, index) => {
            item['workFlg'] = '0'
          })
          target.saveFlg = '0'
          target.volunteerOne = ''
          target.volunteerTwo = ''
          target.volunteerThree = ''
          this.data = newData
        }
        this.dataDept = []
        const pagination = {
          ...this.paginationDept
        }
        pagination.total = 0
        pagination.showTotal = total => `共 ${total} 条`
        pagination.showQuickJumper = true
        this.paginationDept = pagination
      },
      select(dept) {
        var selectUser = this.selectUser
        const newData = [...this.data]
        const target = newData.filter(item => selectUser.userId === item.userId)[0]
        if (target) {
          if (this.volunteerNum > 1) {
            if (this.volunteerNum > 2) {
              if (!target.volunteerOne) {
                target.volunteerOne = dept.deptname
                this.data = newData
                this.updNum(dept)
                return
              }
              if (!target.volunteerTwo) {
                if (target.volunteerOne == dept.deptname && this.dataDept.length > (3 - 2)) {
                  this.$message.warning('其它志愿已选择[' + dept.deptname + '],请重新选择')
                  return
                } else {
                  target.volunteerTwo = dept.deptname
                  this.data = newData
                  this.updNum(dept)
                  return
                }
              }
              if (!target.volunteerThree) {
                if ((target.volunteerOne == dept.deptname || target.volunteerTwo == dept.deptname) && this.dataDept
                  .length > (3 - 1)) {
                  this.$message.warning('其它志愿已选择[' + dept.deptname + '],请重新选择')
                  return
                } else {
                  target.volunteerThree = dept.deptname
                  this.data = newData
                  this.updNum(dept)
                  return
                }
              }
            } else {
              if (!target.volunteerOne) {
                target.volunteerOne = dept.deptname
                this.data = newData
                this.updNum(dept)
                return
              }
              if (!target.volunteerTwo) {
                if (target.volunteerOne == dept.deptname && this.dataDept.length > (3 - 2)) {
                  this.$message.warning('其它志愿已选择[' + dept.deptname + '],请重新选择')
                  return
                } else {
                  target.volunteerTwo = dept.deptname
                  this.data = newData
                  this.updNum(dept)
                  return
                }
              }
            }
          } else {
            if (!target.volunteerOne) {
              target.volunteerOne = dept.deptname
              this.data = newData
              this.updNum(dept)
              return
            }
          }
        }
      },
      updNum(dept) {
        const newDataDept = [...this.dataDept]
        const targetDept = newDataDept.filter(item => dept === item)[0]
        if (targetDept) {
          targetDept.trueNum = targetDept.trueNum - 1
          this.dataDept = newDataDept
        }
      }
    }
  }
</script>
<style>
  .mywp .ant-card-body{
        padding-left: 0px !important;
        padding-right: 0px !important;
  }
</style>
<style lang="less" scoped>
  
  .project-list {

    .card-title {
      font-size: 0;

      a {
        color: rgba(0, 0, 0, 0.85);
        margin-left: 12px;
        line-height: 24px;
        height: 24px;
        display: inline-block;
        vertical-align: top;
        font-size: 14px;

        &:hover {
          color: #1890ff;
        }
      }
    }

    .card-description {
      color: rgba(0, 0, 0, 0.45);
      height: 44px;
      line-height: 22px;
      overflow: hidden;
    }

    .project-item {
      display: flex;
      margin-top: 8px;
      overflow: hidden;
      font-size: 12px;
      height: 20px;
      line-height: 20px;

      a {
        color: rgba(0, 0, 0, 0.45);
        display: inline-block;
        flex: 1 1 0;

        &:hover {
          color: #1890ff;
        }
      }

      .datetime {
        color: rgba(0, 0, 0, 0.25);
        flex: 0 0 auto;
        float: right;
      }
    }

    .ant-card-meta-description {
      color: rgba(0, 0, 0, 0.45);
      height: 44px;
      line-height: 22px;
      overflow: hidden;
    }
  }

  .item-group {
    padding: 20px 0 8px 24px;
    font-size: 0;

    a {
      color: rgba(0, 0, 0, 0.65);
      display: inline-block;
      font-size: 14px;
      margin-bottom: 13px;
      width: 25%;
    }
  }

  .members {
    a {
      display: block;
      margin: 12px 0;
      line-height: 24px;
      height: 24px;

      .member {
        font-size: 14px;
        color: rgba(0, 0, 0, .65);
        line-height: 24px;
        max-width: 100px;
        vertical-align: top;
        margin-left: 12px;
        transition: all 0.3s;
        display: inline-block;
      }

      &:hover {
        span {
          color: #1890ff;
        }
      }
    }
  }

  .mobile {

    .project-list {

      .project-card-grid {
        width: 100%;
      }
    }

    .more-info {
      border: 0;
      padding-top: 16px;
      margin: 16px 0 16px;
    }

    .headerContent .title .welcome-text {
      display: none;
    }
  }
</style>
